/* 内河涌 弹框 水质趋势图
 * @ 劳兆城
 * @ 2017-08-11*/

<template>
	<div class="water-picture">
		<div class="water-picture-menu pull-left">
			<Menu @on-select="menuClick" active-name="ph" width="150">
				<Menu-item name="ph">
					PH值 趋势图
				</Menu-item>
				<Menu-item name="suspended">
					悬浮物 趋势图
				</Menu-item>
				<Menu-item name="chemistry">
					化学需氧量 趋势图
				</Menu-item>
				<Menu-item name="biology">
					生化需氧量 趋势图
				</Menu-item>
				<Menu-item name="ammonia">
					氨氮 趋势图
				</Menu-item>
				<Menu-item name="total">
					总磷 趋势图
				</Menu-item>
			</Menu>
		</div>
		<div class="water-picture-echart pull-left">
			<div ref="echart" class="echart"></div>
		</div>
	</div>
</template>

<script>
	import { waterPicturePh, waterPictureSuspended, waterPictureChemistry, waterPictureBiology, waterPictureAmmonia, waterPictureTotal } from 'common/js/echart'
import { ERR_OK } from 'api/config'
import { getWaterPicture } from 'api/aPicture'

export default {
		created () {
			this._getWaterPicture()
	},
		mounted () {
			setTimeout(() => {
				this.echart = echarts.init(this.$refs.echart)
		}, 20)
		},
		data () {
			return {
				menuActive: 'ph',
				echart: null,
				echartData: {}
			}
		},
		methods: {
			menuClick (name) {
				this.menuActive = name
			this.getEchart()
		},
			getEchart () {
				switch (this.menuActive) {
					case 'ph':
						waterPicturePh.series[0].data = this.echartData.ph
					waterPicturePh.xAxis.data = this.echartData.time
					this.echart.setOption(waterPicturePh)
					break
				case 'suspended':
						waterPictureSuspended.series[0].data = this.echartData.suspended
					waterPictureSuspended.xAxis.data = this.echartData.time
					this.echart.setOption(waterPictureSuspended)
					break
				case 'chemistry':
						waterPictureChemistry.series[0].data = this.echartData.chemistry
					waterPictureChemistry.xAxis.data = this.echartData.time
					this.echart.setOption(waterPictureChemistry)
					break
				case 'biology':
						waterPictureBiology.series[0].data = this.echartData.biology
					waterPictureBiology.xAxis.data = this.echartData.time
					this.echart.setOption(waterPictureBiology)
					break
				case 'ammonia':
						waterPictureAmmonia.series[0].data = this.echartData.ammonia
					waterPictureAmmonia.xAxis.data = this.echartData.time
					this.echart.setOption(waterPictureAmmonia)
					break
				case 'total':
						waterPictureTotal.series[0].data = this.echartData.total
					waterPictureTotal.xAxis.data = this.echartData.time
					this.echart.setOption(waterPictureTotal)
					break
			}
			},
			_getWaterPicture () {
				getWaterPicture().then(res => {
					if (res === undefined) {
						this.echartData = {}
				} else {
						this.echartData = res.result
				}
					this.getEchart()
			})
			}
		}
	}
</script>

<style lang="scss">
	.singleWaterNet-model {
		.water-picture {
			width: 100%;
			height: 100%;
			.water-picture-menu {
				width: 18%;
				height: 100%;
				.ivu-menu-item {
					font-size: 12px;
				}
			}
			.water-picture-echart {
				width: calc(82% - 20px);
				height: 100%;
				margin-left: 10px;
				.echart {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
